الگوهای پیشرفته React: تسلط بر Render Props و Higher-Order Components

React، کتابخانه جاوا اسکریپت برای ساخت رابط‌های کاربری، یک اکوسیستم انعطاف‌پذیر و قدرتمند ارائه می‌دهد. با افزایش پیچیدگی پروژه‌ها، تسلط بر الگوهای پیشرفته برای نوشتن کد قابل نگهداری، قابل استفاده مجدد و قابل آزمایش بسیار مهم می‌شود. این پست وبلاگ به بررسی عمیق دو مورد از مهم‌ترین آن‌ها می‌پردازد: Render Props و Higher-Order Components (HOCs). این الگوها راه‌حل‌های ظریفی برای چالش‌های رایج مانند استفاده مجدد از کد، مدیریت وضعیت و ترکیب کامپوننت ارائه می‌دهند.

درک نیاز به الگوهای پیشرفته

هنگام شروع با React، توسعه‌دهندگان اغلب کامپوننت‌هایی را می‌سازند که هم از ارائه (UI) و هم از منطق (مدیریت وضعیت، واکشی داده‌ها) پشتیبانی می‌کنند. با مقیاس‌بندی برنامه‌ها، این رویکرد منجر به چندین مشکل می‌شود:

• تکثیر کد: منطق اغلب در بین کامپوننت‌ها تکرار می‌شود و تغییرات را خسته‌کننده می‌کند.
• اتصال تنگاتنگ: کامپوننت‌ها به عملکردهای خاصی متصل می‌شوند و قابلیت استفاده مجدد را محدود می‌کنند.
• مشکلات تست: کامپوننت‌ها به دلیل مسئولیت‌های مختلط خود، آزمایش آن‌ها به صورت جداگانه دشوارتر می‌شود.

الگوهای پیشرفته، مانند Render Props و HOCs، با ترویج تفکیک وظایف، به سازماندهی بهتر کد و قابلیت استفاده مجدد کمک می‌کنند. آن‌ها به شما کمک می‌کنند کامپوننت‌هایی بسازید که درک، نگهداری و آزمایش آن‌ها آسان‌تر باشد و منجر به برنامه‌های قوی‌تر و مقیاس‌پذیرتر شود.

Render Props: ارسال یک تابع به عنوان Prop

Render Props یک تکنیک قدرتمند برای به اشتراک گذاشتن کد بین کامپوننت‌های React با استفاده از یک prop است که مقدار آن یک تابع است. سپس از این تابع برای رندر کردن بخشی از UI کامپوننت استفاده می‌شود و به کامپوننت اجازه می‌دهد داده‌ها یا وضعیت را به یک کامپوننت فرزند منتقل کند.

نحوه کار Render Props

مفهوم اصلی Render Props شامل یک کامپوننت است که یک تابع را به عنوان یک prop دریافت می‌کند، که معمولاً render یا children نامیده می‌شود. این تابع داده‌ها یا وضعیت را از کامپوننت والد دریافت می‌کند و یک عنصر React را برمی‌گرداند. کامپوننت والد رفتار را کنترل می‌کند، در حالی که کامپوننت فرزند رندر را بر اساس داده‌های ارائه شده مدیریت می‌کند.

مثال: یک کامپوننت ردیاب ماوس

بیایید یک کامپوننت ایجاد کنیم که موقعیت ماوس را ردیابی می‌کند و آن را در اختیار فرزندان خود قرار می‌دهد. این یک مثال کلاسیک Render Props است.

            class MouseTracker extends React.Component {
  constructor(props) {
    super(props);
    this.state = { x: 0, y: 0 };
    this.handleMouseMove = this.handleMouseMove.bind(this);
  }

  handleMouseMove(event) {
    this.setState({ x: event.clientX, y: event.clientY });
  }

  render() {
    return (
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

function App() {
  return (
    <MouseTracker render={({ x, y }) => (
      <p>The mouse position is ({x}, {y})</p>
    )} />
  );
}

            

              
                Copy
              
            
          

در این مثال:

• MouseTracker وضعیت موقعیت ماوس را مدیریت می‌کند.
• یک prop render دریافت می‌کند که یک تابع است.
• تابع render موقعیت ماوس (x و y) را به عنوان آرگومان دریافت می‌کند.
• در داخل App، ما تابعی را به prop render ارائه می‌دهیم که یک تگ <p> را رندر می‌کند که مختصات ماوس را نمایش می‌دهد.

مزایای Render Props

• قابلیت استفاده مجدد از کد: منطق ردیابی موقعیت ماوس در MouseTracker کپسوله شده است و می‌توان آن را در هر کامپوننتی دوباره استفاده کرد.
• انعطاف‌پذیری: کامپوننت فرزند تعیین می‌کند که چگونه از داده‌ها استفاده کند. به یک UI خاص وابسته نیست.
• قابلیت تست: می‌توانید به راحتی کامپوننت MouseTracker را به صورت جداگانه آزمایش کنید و همچنین منطق رندر را به طور جداگانه آزمایش کنید.

کاربردهای دنیای واقعی

Render Props معمولاً برای موارد زیر استفاده می‌شوند:

• واکشی داده‌ها: واکشی داده‌ها از APIها و به اشتراک گذاشتن آن با کامپوننت‌های فرزند.
• مدیریت فرم: مدیریت وضعیت فرم و ارائه آن به کامپوننت‌های فرم.
• کامپوننت‌های UI: ایجاد کامپوننت‌های UI که به وضعیت یا داده نیاز دارند، اما منطق رندر را دیکته نمی‌کنند.

مثال: واکشی داده‌ها

            class FetchData extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null, loading: true, error: null };
  }

  componentDidMount() {
    fetch(this.props.url)
      .then(response => response.json())
      .then(data => this.setState({ data, loading: false }))
      .catch(error => this.setState({ error, loading: false }));
  }

  render() {
    const { data, loading, error } = this.state;

    if (loading) {
      return this.props.render({ loading: true });
    }

    if (error) {
      return this.props.render({ error });
    }

    return this.props.render({ data });
  }
}

function MyComponent() {
  return (
    <FetchData
      url="/api/some-data"
      render={({ data, loading, error }) => {
        if (loading) {
          return <p>Loading...</p>;
        }
        if (error) {
          return <p>Error: {error.message}</p>;
        }
        return <p>Data: {JSON.stringify(data)}</p>;
      }}
    />
  );
}

            

              
                Copy
              
            
          

در این مثال، FetchData منطق واکشی داده را مدیریت می‌کند، و prop render به شما امکان می‌دهد نحوه نمایش داده‌ها را بر اساس وضعیت بارگیری، خطاهای احتمالی یا خود داده‌های واکشی شده سفارشی کنید.

Higher-Order Components (HOCs): بسته‌بندی کامپوننت‌ها

Higher-Order Components (HOCs) یک تکنیک پیشرفته در React برای استفاده مجدد از منطق کامپوننت است. آن‌ها توابعی هستند که یک کامپوننت را به عنوان آرگومان می‌گیرند و یک کامپوننت جدید و بهبودیافته را برمی‌گردانند. HOCs الگویی است که از اصول برنامه‌نویسی تابعی برای جلوگیری از تکرار کد در بین کامپوننت‌ها به وجود آمده است.

نحوه کار HOCs

HOC اساساً تابعی است که یک کامپوننت React را به عنوان آرگومان می‌پذیرد و یک کامپوننت React جدید را برمی‌گرداند. این کامپوننت جدید معمولاً کامپوننت اصلی را بسته‌بندی می‌کند و برخی عملکردهای اضافی را اضافه می‌کند یا رفتار آن را تغییر می‌دهد. کامپوننت اصلی اغلب به عنوان "کامپوننت بسته‌بندی شده" و کامپوننت جدید به عنوان "کامپوننت بهبودیافته" نامیده می‌شود.

مثال: یک کامپوننت برای ثبت Propها

بیایید یک HOC ایجاد کنیم که propهای یک کامپوننت را در کنسول ثبت می‌کند.

            
function withLogger(WrappedComponent) {
  return class extends React.Component {
    render() {
      console.log('Props:', this.props);
      return <WrappedComponent {...this.props} />;
    }
  };
}

function MyComponent(props) {
  return <p>Hello, {props.name}!</p>;
}

const MyComponentWithLogger = withLogger(MyComponent);

function App() {
  return <MyComponentWithLogger name="World" />;
}

            

              
                Copy
              
            
          

در این مثال:

• withLogger یک HOC است. یک WrappedComponent را به عنوان ورودی می‌گیرد.
• در داخل withLogger، یک کامپوننت جدید (یک کامپوننت کلاس ناشناس) برگردانده می‌شود.
• این کامپوننت جدید propها را قبل از رندر کردن WrappedComponent در کنسول ثبت می‌کند.
• عملگر گسترش ({...this.props}) همه propها را به کامپوننت بسته‌بندی شده منتقل می‌کند.
• MyComponentWithLogger کامپوننت بهبودیافته است که با اعمال withLogger به MyComponent ایجاد شده است.

مزایای HOCs

• قابلیت استفاده مجدد از کد: HOCs را می‌توان برای افزودن عملکرد مشابه به چندین کامپوننت اعمال کرد.
• تفکیک وظایف: آن‌ها منطق ارائه را از جنبه‌های دیگر، مانند واکشی داده یا مدیریت وضعیت، جدا می‌کنند.
• ترکیب کامپوننت: می‌توانید HOCs را زنجیر کنید تا عملکردهای مختلف را ترکیب کنید و کامپوننت‌های بسیار تخصصی ایجاد کنید.

کاربردهای دنیای واقعی

HOCs برای اهداف مختلفی استفاده می‌شوند، از جمله:

• احراز هویت: محدود کردن دسترسی به کامپوننت‌ها بر اساس احراز هویت کاربر (به عنوان مثال، بررسی نقش‌ها یا مجوزهای کاربر).
• مجوز: کنترل اینکه کدام کامپوننت‌ها بر اساس نقش‌ها یا مجوزهای کاربر رندر می‌شوند.
• واکشی داده: بسته‌بندی کامپوننت‌ها برای واکشی داده از APIها.
• استایل‌دهی: افزودن استایل‌ها یا تم‌ها به کامپوننت‌ها.
• بهینه‌سازی عملکرد: Memoize کردن کامپوننت‌ها یا جلوگیری از رندرهای مجدد.

مثال: HOC احراز هویت

            
function withAuthentication(WrappedComponent) {
  return class extends React.Component {
    render() {
      const isAuthenticated = localStorage.getItem('token') !== null;

      if (isAuthenticated) {
        return <WrappedComponent {...this.props} />;
      } else {
        return <p>Please log in.</p>;
      }
    }
  };
}

function AdminComponent(props) {
  return <p>Welcome, Admin!</p>;
}

const AdminComponentWithAuth = withAuthentication(AdminComponent);

function App() {
  return <AdminComponentWithAuth />;
}

            

              
                Copy
              
            
          

این HOC withAuthentication بررسی می‌کند که آیا یک کاربر احراز هویت شده است (در این مورد، بر اساس یک توکن در localStorage) و به طور مشروط کامپوننت بسته‌بندی شده را در صورت احراز هویت کاربر رندر می‌کند. در غیر این صورت، یک پیام ورود به سیستم را نمایش می‌دهد. این نشان می‌دهد که چگونه HOCs می‌توانند کنترل دسترسی را اعمال کنند و امنیت و عملکرد یک برنامه را افزایش دهند.

مقایسه Render Props و HOCs

هر دو Render Props و HOCs الگوهای قدرتمندی برای استفاده مجدد از کامپوننت هستند، اما ویژگی‌های متمایزی دارند. انتخاب بین آن‌ها بستگی به نیازهای خاص پروژه شما دارد.

چه زمانی Render Props را انتخاب کنیم:

• زمانی که به درجه بالایی از انعطاف‌پذیری در نحوه رندر داده‌ها یا وضعیت توسط کامپوننت فرزند نیاز دارید.
• زمانی که به یک رویکرد ساده برای به اشتراک گذاشتن داده‌ها و عملکرد نیاز دارید.
• زمانی که ترکیب کامپوننت ساده‌تر را بدون تو در تو بودن بیش از حد ترجیح می‌دهید.

چه زمانی HOCs را انتخاب کنیم:

• زمانی که نیاز به افزودن نگرانی‌های متقاطع (به عنوان مثال، احراز هویت، مجوز، گزارش‌گیری) دارید که برای چندین کامپوننت اعمال می‌شود.
• زمانی که می‌خواهید از منطق کامپوننت بدون تغییر ساختار کامپوننت اصلی استفاده مجدد کنید.
• زمانی که منطقی که اضافه می‌کنید نسبتاً مستقل از خروجی رندر شده کامپوننت است.

کاربردهای دنیای واقعی: یک دیدگاه جهانی

یک پلتفرم تجارت الکترونیک جهانی را در نظر بگیرید. Render Props ممکن است برای یک کامپوننت CurrencyConverter استفاده شود. کامپوننت فرزند نحوه نمایش قیمت‌های تبدیل شده را مشخص می‌کند. کامپوننت CurrencyConverter ممکن است درخواست‌های API را برای نرخ ارز مدیریت کند و کامپوننت فرزند می‌تواند قیمت‌ها را بر اساس مکان کاربر یا ارز انتخاب شده در USD، EUR، JPY و غیره نمایش دهد.

HOCs می‌تواند برای احراز هویت استفاده شود. یک HOC withUserRole می‌تواند کامپوننت‌های مختلف مانند AdminDashboard یا SellerPortal را بسته‌بندی کند و اطمینان حاصل کند که فقط کاربرانی با نقش‌های مناسب می‌توانند به آن‌ها دسترسی داشته باشند. خود منطق احراز هویت مستقیماً بر جزئیات رندر کامپوننت تأثیر نمی‌گذارد، و HOCs را به یک انتخاب منطقی برای افزودن این کنترل دسترسی در سطح جهانی تبدیل می‌کند.

ملاحظات عملی و بهترین شیوه‌ها

1. قراردادهای نامگذاری

از نام‌های واضح و توصیفی برای کامپوننت‌ها و propهای خود استفاده کنید. برای Render Props، به طور مداوم از render یا children برای prop استفاده کنید که تابع را دریافت می‌کند.

برای HOCs، از یک قرارداد نامگذاری مانند withSomething (به عنوان مثال، withAuthentication، withDataFetching) استفاده کنید تا هدف آن‌ها را به وضوح نشان دهید.

2. مدیریت Prop

هنگام ارسال propها به کامپوننت‌های بسته‌بندی شده یا کامپوننت‌های فرزند، از عملگر گسترش ({...this.props}) استفاده کنید تا اطمینان حاصل کنید که همه propها به درستی ارسال می‌شوند. برای Render Props، فقط داده‌های ضروری را به دقت ارسال کنید و از قرار گرفتن غیرضروری داده‌ها در معرض دید خودداری کنید.

3. ترکیب و تودرتو بودن کامپوننت

به نحوه ترکیب کامپوننت‌های خود توجه داشته باشید. تودرتو بودن بیش از حد، به خصوص با HOCs، می‌تواند خواندن و درک کد را دشوارتر کند. استفاده از ترکیب را در الگوی render prop در نظر بگیرید. این الگو منجر به کد قابل مدیریت‌تری می‌شود.

4. آزمایش

آزمایش‌های کامل برای کامپوننت‌های خود بنویسید. برای HOCs، خروجی کامپوننت بهبودیافته را آزمایش کنید و همچنین مطمئن شوید که کامپوننت شما propهایی را که برای دریافت از HOC طراحی شده است، دریافت و استفاده می‌کند. Render Props به راحتی قابل آزمایش هستند زیرا می‌توانید کامپوننت و منطق آن را به طور مستقل آزمایش کنید.

5. عملکرد

از پیامدهای احتمالی عملکرد آگاه باشید. در برخی موارد، Render Props ممکن است باعث رندرهای مجدد غیرضروری شود. اگر تابع پیچیده است و ایجاد مجدد آن در هر رندر ممکن است بر عملکرد تأثیر بگذارد، تابع render prop را با استفاده از React.memo یا useMemo Memoize کنید. HOCs همیشه به طور خودکار عملکرد را بهبود نمی‌بخشند. آن‌ها لایه‌های کامپوننت را اضافه می‌کنند، بنابراین عملکرد برنامه خود را به دقت نظارت کنید.

6. اجتناب از تضادها و برخوردها

نحوه جلوگیری از تضاد نام prop را در نظر بگیرید. با HOCs، اگر چندین HOC prop را با نام یکسان اضافه کنند، این می‌تواند منجر به رفتار غیرمنتظره شود. از پیشوندها (به عنوان مثال، authName، dataName) برای نام‌گذاری propهای اضافه شده توسط HOCs استفاده کنید. در Render Props، اطمینان حاصل کنید که کامپوننت فرزند شما فقط propهای مورد نیاز خود را دریافت می‌کند و کامپوننت شما propهای معنادار و غیرهمپوشانی دارد.

نتیجه‌گیری: تسلط بر هنر ترکیب کامپوننت

Render Props و Higher-Order Components ابزارهای ضروری برای ساخت کامپوننت‌های React قوی، قابل نگهداری و قابل استفاده مجدد هستند. آن‌ها راه‌حل‌های ظریفی برای چالش‌های رایج در توسعه فرانت‌اند ارائه می‌دهند. با درک این الگوها و تفاوت‌های ظریف آن‌ها، توسعه‌دهندگان می‌توانند کد تمیزتری ایجاد کنند، عملکرد برنامه را بهبود بخشند و برنامه‌های وب مقیاس‌پذیرتری را برای کاربران جهانی بسازند.

با ادامه تکامل اکوسیستم React، مطلع ماندن از الگوهای پیشرفته به شما این امکان را می‌دهد که کد کارآمد و مؤثری بنویسید و در نهایت به تجربه‌های کاربری بهتر و پروژه‌های قابل نگهداری بیشتر کمک کنید. با استقبال از این الگوها، می‌توانید برنامه‌های React را توسعه دهید که نه تنها کاربردی هستند، بلکه به خوبی ساختار یافته‌اند، و درک، آزمایش و گسترش آن‌ها را آسان‌تر می‌کند و به موفقیت پروژه‌های شما در یک چشم‌انداز جهانی و رقابتی کمک می‌کند.